<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="cancel">
    <template slot="title">
      {{title}}
    </template>
    <el-alert title="重要提醒" :closable="false" type="warning" show-icon>
      <slot>
        <ol style="margin: 0;padding:0 0 0 10px;font-size: 10px;">
          <li>注意：玩家变更代理需要谨慎操作，会造成代理输赢日报表的数据差异</li>
          <li>切忌：代理月结算数据报表生成期间，不要进行玩家变更代理的更换。</li>
        </ol>
      </slot>
    </el-alert>
    <el-form :model="form" :rules="proxyRule" ref="proxyForm">
      <el-form-item label="当前代理：" :label-width="formLabelWidth">
        <el-col :span="16">
          <el-input v-model="rowData.parentName" disabled="disabled" auto-complete="off" @keyup.enter.native="doSave({action: 'saveForm', form: 'proxyForm'})"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item
        label="变更为代理账户名："
        prop="nextProxyName"
        :label-width="formLabelWidth">
        <el-col :span="16">
          <el-autocomplete
            popper-class="my-autocomplete"
            v-model="form.proxy"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            placeholder="请输入内容"
            @select="handleSelect" style="width: 100%;">
            <template slot-scope="{ item }">
              <el-col :span="16">
                {{ item }}
              </el-col>
              <el-col :span="8" style="text-align:right">
                <span class="level">{{ item.level }}</span>
              </el-col>
            </template>
          </el-autocomplete>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary"  @click="doSave({action: 'saveForm', form: 'proxyForm'})">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

  import {form} from '@/build'
  import {searchAgencyList} from '@/services/api/agency';
  import {updateMembersAgency} from '@/services/api/member';

  export default {
    name: "proxy-dialog",
    props: ['dialogVisible', 'rowData'],
    mixins:[form],
    data() {
      return {
        formLabelWidth: '180px',
        form: {
          proxyName: '' ,
          proxy: '',
          userId:this.rowData.id
        },
        proxyRule:{
          proxy:[
            { required: true, message: '变更代理名称不能为空' },
          ]
        }
      }
    },
    computed: {
      title() {
        return `玩家账户名：${this.rowData.username}`
      },
    },
    mounted() {
      this.bindSave(updateMembersAgency, 'saveForm', 'form',{
        afterSuccess: () => {
          this.$emit('cancel');
        }
      });
    },
    methods: {
      cancel() {
        this.resetForm('proxyForm');
        this.$emit('cancel');
      },
      querySearch(queryString, cb) {
        if(!_.isUndefined(queryString) && queryString.length>1){
          searchAgencyList({username:queryString}).then(([result,data])=>{
            if(result){
              console.log(data)
              cb(data);
            }
          })
        }
        // 调用 callback 返回建议列表的数据
      },
      createFilter(queryString) {
      var reg = new RegExp(queryString,'g')
        return (restaurant) => {
          return reg.test(restaurant.nickname.toLowerCase());
        };
      },
      handleSelect(item) {
        console.log(item)
        this.form.proxy = item
      },
    },

  }
</script>

<style lang="scss" scoped>
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .level {
        font-size: 12px;
        color: #b4b4b4;
      }
    }
  }

</style>
